<template>
  <Select
    v-model="currValue"
    filterable
    remote
    ref="store"
    :loading="loading"
    clearable
    :remote-method="remote"
    @on-clear="remote">
    <Option v-for="(item, index) in productList" :value="item.id" :key="index">{{item.label}}</Option>
  </Select>
</template>
<script>
  import { debounce } from '@/util'
  export default {
    props: {
      value: {
        type: [String, Number],
        default: null
      }
    },
    data() {
      return {
        productList: [],
        loading: false,
        oTimerDetail: null
      }
    },
    computed: {
      currValue: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v || '')
        }
      }
    },
    mounted() {
      this.getDetailData()
    },
    methods: {
      onchange(val) {
        this.$emit('onchange', val)
      },
      remote(query='') {
        this.getDetailData(query)
      },
      getDetailData: debounce(function d(query='') {
        this.loading = true
        let param = {
          keyword: query,
          size: 20,
          current: 1
        }
        return this.$ajaxGet('activity/product/spu_sku_page', param).then(data => {
          this.loading = false
          this.productList = []
          let records = data.records || []
          records.forEach(item => {
            let productSkuList = item.productSkuList
            let title = item.title
            productSkuList.forEach(m => {
              this.productList.push({
                id: m.id,
                label: title
              })
            })
          })
        })
      }, 400)
    },
    watch: {
      currValue(v) {
        this.$emit('input', v)
      },
      value(v) {
        this.currValue = v
      }
    }
  }
</script>